<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 头部 -->
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple userList">
            <el-input placeholder="根据用户名搜索" v-model="userListQueryData.username"></el-input>
            <el-button class="empty" @click="emptyUser" size="small">清空</el-button>
            <el-button type="primary" @click="nameSearch" size="small">搜索</el-button>
          </div>
        </el-col>
        <el-col :span="12" class="addUser">
          <div class="grid-content bg-purple-light addUser">
            <el-button type="success" size="small" icon="el-icon-edit" @click="addUser">新增用户</el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 消息提示 -->
      <el-alert :title="'共'+total+'条记录'" type="info" show-icon :closable="false">
      </el-alert>
      <!-- 表格列表 -->
      <el-table
      :data="tableData"
      ref="tableData"
      style="width: 100%"
      v-loading="loading"
      element-loading-text="给我一点时间">
        <el-table-column prop="id" label="序号" width="260">
        </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="phone" label="联系电话"> </el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="permission_group_title" label="权限组名称"> </el-table-column>
        <el-table-column prop="role" label="角色"> </el-table-column>
        <el-table-column prop="address" label="操作" width="120">
          <template slot-scope="{row}">
            <el-button plain type="primary" icon="el-icon-edit" circle @click="editUser(row)"></el-button>
            <el-button plain type="danger" icon="el-icon-delete" v-if="row.id===2?deleteShow:!deleteShow" circle @click="deleteUserList(row.id)"></el-button>
            <!-- <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleChange"
        style="text-align:right;margin-top:20px"
        background
        :current-page="userListQueryData.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="userListQueryData.pagesize"
        layout="  prev, pager, next,sizes, jumper"
        :total="total-0">
      </el-pagination>
    </el-card>

    <!-- 新增表单的弹层 -->

    <!-- v-model="dialogFormVisible" -->
    <user-add
    :text="text"
    :pageTitle="pageTitle"
    :PermissionGroupsList="PermissionGroupsList"
    :formBase="formBase"
    :ruleInline="ruleInline"
    ref="userAdd"
    @handleCloseModal="handleCloseModal"
    @newDataes="newDataes"
    :deleteShow="deleteShow"
    />

  </div>
</template>

<script>
import { simple as simpleList } from '@/api/base/permissions.js'
import { list as userList, remove as userDelete } from '@/api/base/users.js'
// import pageTool from '../../module-dashboard/components/pageTool.vue'
import UserAdd from '../components/user-add.vue'
export default {
  name: 'users',
  components: { UserAdd },

  data () {
    return {
      // 显示删除按钮
      deleteShow: false,
      // 搜索的值
      inputUsernameValue: '',
      // 表格数据
      tableData: [],
      // 表格请求参数
      userListQueryData: {
        page: 1,
        pagesize: 10,
        keyword: '',
        username: ''
      },
      // 加载
      loading: true,
      // 总共条数
      total: '',
      // 弹层显示文本
      text: '',
      pageTitle: '',
      // 表单选择循环的数据
      PermissionGroupsList: [],
      // 表单提交的数据
      formBase: {
        sex: ''
      },
      // 表单验证规则
      ruleInline: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' }

        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }

        ],
        permission_group_id: [
          { required: true, message: '权限组名称不能为空', trigger: ['blur', 'change'] }
        ]
      }
    }
  },

  created () {
    this.loadUserList()
  },

  methods: {
    // 编辑用户
    async  editUser (row) {
      console.log(row)
      // 编辑用户
      this.formBase = row
      this.formBase.id = row.id
      this.text = '编辑'
      this.pageTitle = '用户'
      this.$refs.userAdd.dialogFormV()
      // 获取选择器选项
      const res = await simpleList()
      this.PermissionGroupsList = res.data
    },
    // 新增用户
    async addUser () {
      // 新增用户
      this.text = '创建'
      this.pageTitle = '用户'
      // if (this.formBase.password === undefined) {
      //   this.deleteShow = true
      // }
      this.$refs.userAdd.dialogFormV()
      const res = await simpleList()
      this.PermissionGroupsList = res.data
    },
    // 点击确定提交表单
    newDataes () {
      this.formBase = {}
      this.$refs.userAdd.dialogFormH()
      this.loadUserList()
    },
    // 点击取消退出
    handleCloseModal () {
      this.loadUserList()
      this.formBase = {}
      this.$refs.userAdd.dialogFormH()
    },
    // 加载用户列表
    async loadUserList () {
      const res = await userList(this.userListQueryData)
      this.tableData = res.data.list
      this.loading = false
      this.total = res.data.counts
    },
    // 点击搜索
    async nameSearch () {
      const res = await userList(this.userListQueryData)
      this.tableData = res.data.list
      this.total = res.data.counts
      this.loadUserList()
    },
    // 点击清空
    emptyUser () {
      this.userListQueryData.username = ''
      this.loading = true
      this.loadUserList()
    },
    // 分页跳转
    handleChange (pageNum) {
      this.userListQueryData.page = pageNum
      this.loadUserList()
    },
    // 每页多少条
    handleSizeChange (pageSize) {
      console.log(pageSize)
      this.userListQueryData.pagesize = pageSize
      this.loadUserList()
    },
    // 删除用户列表
    async  deleteUserList (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await userDelete({
          id
        })
        this.loadUserList()
        this.$message({
          type: 'success',
          message: '成功删除了用户!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
.box-card {
  margin: 20px;
}
/deep/.el-input--medium .el-input__inner{
  height: 32px;
}
.userList {
  display: flex;
  .el-input {
    width: 200px;
  }
  .empty {
    margin-left: 15px;
  }
}
.addUser {
  // justify-content: end;
  float: right;
}

.el-alert--info.is-light {
  margin-top: 20px;
  margin-bottom: 20px;
}
/deep/.userSelect{
  .el-input__inner{
    width: 217px;
  }
}
</style>
<style lang="less" scoped>
/deep/.el-table th > .cell {
  text-align: center;
}

/deep/.el-table .cell {
  text-align: center;
}

.el-form{
/deep/.el-input__inner {
  width: 300px;
}
}

/deep/.el-textarea__inner{
  width: 300px;
}
/deep/.el-dialog__footer{
  text-align: center;
}

.pagetool {
  margin-top: 20px;
}
</style>
